.start-back {
    width: 100%;
    height: 100vh;
}

.start-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.info-container img {
    animation: rotate 3s linear infinite;
    z-index: 1;
}

.info-container .content {
    display: none;
}

.info-container:hover img {
    display: none;
}

.info-container:hover .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.form-container form {
    width: 100%;
}

.form-container button {
    display: flex;
    width: 100%;
    align-items: center;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@media (orientation: landscape) {
    .start-back {
        background-color: #4b8dff;
    }

    .start-container {
        border: var(--dark-grey) solid 1px;
        height: 470px;
        border-radius: 1em;
        overflow: hidden;
        background-color: #fdf9f6;
    }

    .info-container {
        width: 300px;
        padding: 2em 2em;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info-container img {
        width: 450px;
        height: 450px;
    }

    .form-container {
        border-left: var(--dark-grey) solid 1px;
        width: 300px;
        position: relative;
        padding: 2em 2em;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-container button {
        justify-content: space-between;
    }

    .start-switch {
        position: absolute;
        background-color: #d9e1ff;
        padding: 0.5em 2em;
        transform-origin: right top;
        transform: skewX(38deg);
        top: 0;
        right: 0;
    }

    .start-switch a {
        transform: skewX(-38deg);
        display: block;
        text-decoration: none;
        color: #003cab;
    }

    .start-switch a span {
        display: none;
    }
}

@media (orientation: portrait) {
    .start-container {
        width: 100%;
        height: 100%;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
    }

    .info-container {
        display: flex;
        justify-content: center;
        height: 40vw;
    }

    .info-container img {
        height: 100%;
    }

    .info-container:hover .content span, .info-container:hover .content button {
        display: none;
    }

    .form-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-container button {
        border-radius: 2em;
        justify-content: center;
        font-size: 1.3rem;
        height: auto;
    }

    .form-container .blank {
        height: 1em;
        flex-grow: 0;
    }

    .btn-container {
        margin: 0;
    }

    .start-switch {
        position: absolute;
        bottom: -1em;
        right: 0;
    }

    .start-switch a {
        display: block;
        text-decoration: none;
        color: #003cab;
    }
}